<script>
    var form;
    $(function () {

        form = new Vue({
            el:'#orderList',
            data:{
                doMark:false,
                mark_order_id:'',
                mark_content:'',
                page:1,
                list_api:window.list_api,
            },
            mounted:function(){
                var self = this;
                if (($('#more').length > 0) && self.list_api){

                    $(window).scroll(function(event){
                        if ($('#more').length > 0){
                            var at = $(window).scrollTop()+$(window).height() > $('#more').offset().top;
                            if (at){
                                $('#more').remove();
                                self.next_page();
                            }
                        }
                    });
                    $(window).scroll();
                }
            },
            methods:{
                mark:function(event){
                    var that = event.target;

                    this.mark_order_id = $(that).attr('order_id');
                    this.mark_content = $(that).next('label').text();

                    this.doMark = true;
                },
                submit:function(event){
                    if (!validator.form()){
                        return
                    }

                    var self = this;
                    axios.post('/ajax/order/mark', $('#form').serialize())
                    .then(function (response) {
                        if (response.data.code == 200) {
                            alert('保存成功');
                            self.doMark = false;
                            $('#mark_'+self.mark_order_id).text(self.mark_content);
                        } else {
                            alert(response.data.message || '保存失败');
                        }
                    },function (response) {
                        alert(response.data.message || '保存失败');
                    }).catch(function (err) {
                        alert('保存失败');
                    });
                },
                next_page:function(event){
                    var more_content_div = $('#more_content');
                    more_content_div.html('正在加载......');

                    var self = this;
                    axios.post(this.list_api, {
                        page: self.page+1
                    }).then(function (response) {

                        if (response.status == 200) {
                            var scrollTop = $(window).scrollTop();
                            more_content_div.html(response.data).removeAttr('id');
                            $(window).scrollTop(scrollTop);

                            self.page++;
                        } else {
                            more_content_div.html('点击加载下一页').click(function(){
                                self.next_page();
                            });
                        }
                    },function (response) {
                        more_content_div.html('点击加载下一页').click(function(){
                            self.next_page();
                        });
                    }).catch(function (err) {
                        more_content_div.html('点击加载下一页').click(function(){
                            self.next_page();
                        });
                    });
                },
            },
            components:{
            }
        });

        var validator = $("#form").validate({
            rules: {
                order_id:{
                    required:true,
                },
                mark:{
                    required:true,
                },
            },
            messages: {
                mark:{
                    required:'请填写备注内容',
                },
            },
//            submitHandler: function(form) {
//                form.submit();
//            },
        });
    });
</script>
<style>
    #more_content{width:100%;text-align:center;background-color: #FFF;border-bottom: 1px solid #CCC;border-top: 1px solid #CCC;}
</style>